<template>
  <el-select
    v-model="selectedColor"
    placeholder="请选择颜色"
    @change="handleColorChange"
    style="width: -webkit-fill-available"
  >
    <el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value">
      <div style="display: flex; align-items: center">
        <span>{{ item.label }}</span>
        <div
          :style="{
            backgroundColor: item.value,
            flex: '1',
            height: '20px',
            marginLeft: '20px',
          }"
        ></div>
      </div>
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: String, // 接受父组件传递的值
  },
  data() {
    return {
      selectedColor: this.value,
      colors: [
        { label: "淡蓝色", value: "#E5F1FE" },
        { label: "淡绿色", value: "#EFF8EB" },
        { label: "淡橙色", value: "#FFF3E5" },
        { label: "淡黄色", value: "#E6F6F8" },
        { label: "淡紫色", value: "#FEF9E5" },
        { label: "淡粉色", value: "#F0EBF9" },
        { label: "淡红色", value: "#FDE8EF" },
        { label: "淡青色", value: "#E5FAF4" },
        { label: "淡棕色", value: "#F1F3F6" },
      ],
    };
  },
  watch: {
    // 监听父组件传递的值的变化，更新内部使用的值
    value(newVal) {
      this.selectedColor = newVal;
    },
    // 监听内部值的变化，更新父组件的值
    selectedColor(newVal) {
      this.$emit("input", newVal);
    },
  },
  methods: {
    handleColorChange() {
      console.log(this.selectedColor);
      this.$emit("input", this.selectedColor); // 触发 input 事件，将内部使用的值传递给父组件
    },
  },
};
</script>
